Day 1 - 基本介紹

前言

因為剛好很巧的在工作上很常用的這個 Canvas Canvas 的函式庫，想說就來稍微紀錄一下他一些常用的功能，並且透過實際的練習來更熟悉這個 Library，未來 30 天主要就是來了解這套 Library 主要能做出哪些有趣的應用，發掘 Fabricjs 所提供的各種精美的 api 優美的物件寫法，並且比較一些使用原生 Canvas 和 Fabricjs 在使用上的差異性，最後再做一些簡單的應用和探討一些應用上會遇到的一些問題，加油囉!!

Fabricjs 的歷史

原先為了建立一個有趣的線上客製 T-shirt 的平台，讓客戶可以快速將自己想要的圖案放在 T-shirt 上，線上及時地去預覽客戶設計出來的樣子。

介紹

HTML5 Canvas 也出了好幾年了，若要用原生 Canvas 提供的 API 去繪製一些圖形，通常我們會也利用物件導向的概念去封裝他們，而 Fabricjs 就幫我們做好這些事情，讓我們能夠透過把新增物件的方式，快速的去把我們想要的圖形繪製出來，並且提供很方便事件接口讓我們能輕鬆的操控和傾聽一切關於 canvas 的動作

什麼是 Fabricjs

一個基於 HTML5 Canvas API 所建立的 Library
用新增物件的方式快速建立 Canvas 圖形。

可建立的物件有包括

• 簡單的幾何圖形，如圓形、矩形、多邊形，或是線條。
• 複雜多個節點的圖形
• 匯入圖片
• 匯入 svg

可以輕鬆使用滑鼠控制這一切你所創造的物件，如

• 位置
• 大小
• 旋轉角度

且透過 javascript 去控制這些你所建立的物件圖形的屬性像是

• 顏色
• 透明度
• 圖層 (z-index)

實際應用

Fabricjs 能夠讓我們快速、簡單的將 Canvas 中的圖形包裝成物件，且和使用者互動。
一般最常見的實作是製作網頁編輯器(小畫家、平面卡片設計之類的應用)，
還有像是客製化像是日曆、手機殼、T-shirt，都能透過 fabricjs 快速地去實作。

相關作品

• 精美的線上設計平面卡片 - CleverBrush
• TOAST Image Editor
  更多使用 Fabricjs 製作的作品

參考連結

• Fabricjs